<template>
  <view class="tutor-list"> 
    <z-paging :paging-style="{'padding-left':'3%','padding-bottom':'10rpx'}" width="94%" ref="paging" v-model="dataList" @query="getAssistantListData">
			<template #top>
        <!-- 搜索框 -->
        <view class="search-section">
          <view class="search-box">
            <tui-icon name="search" :size="22" color="#8A9399"></tui-icon>
            <tui-input padding="0 32rpx" placeholderStyle="rgba(0, 0,0, 0.9)"  color="#000" size="28" :borderBottom="false"
								placeholder="请输入关键词搜索" :radius="40" clearable @input="input" @confirm="handleSearch"
					@clear="clearInput"> 
							</tui-input>  
          </view> 
            <view style="margin-left: 20rpx;" class="tui-screen-item" @tap="screen" data-index="3">
                <text>筛选</text>
                <tui-icon name="screen" :size="14" color="#333" :bold="true"></tui-icon>
              </view>
        </view>

        <!-- 筛选条件 -->
        <!-- <view class="filter-section">
          <view class="filter-item" @tap="showCategory=true">
            <text>性别</text>
            <view class="angle"></view>
          </view>
          <view class="filter-item" @tap="visibleBt=true">
            <text>{{cityName}}</text>
            <view class="angle"></view> 
          </view>
        </view> -->

        <view>
          <scroll-view scroll-with-animation  :scroll-into-view="toView" scroll-x class="calss-list" v-if="classList.length&&classList.length >4">
            <view :id="'id' + index" @tap="clickClass(calss,index)" :class="activeIndex===index ? 'coach-item activeItem':'coach-item'" v-for="(calss, index) in classList" :key="index"> 
              <image class="image" :src="ossUrl+calss.categoryIcon" mode="aspectFill"></image>
              <text class="name">{{calss.categoryName}}</text> 
            </view>
          </scroll-view>
          <view class="calss-list flexcontent" v-else>
            <view  @tap="clickClass(calss,index)" :class="activeIndex===index ? 'coach-item activeItem':'coach-item'" v-for="(calss, index) in classList" :key="index"> 
              <image class="image" :src="ossUrl+calss.categoryIcon" mode="aspectFill"></image>
              <text class="name">{{calss.categoryName}}</text> 
            </view>
          </view>
        </view>
			</template>
		<!-- 教练列表 --> 
		<tui-waterfall :listData="dataList"> 
				<template v-slot:left="{ list }"> 
					<view class="coach-grid"> 
				<view class="coach-item" v-for="(coach, index) in list" :key="index" @click="goToDetail(coach)">
					<image class="coach-img" :src="ossUrl+coach.masterImg" mode="aspectFill"></image>
					<view class="online-tag" v-if="coach.online">一对一</view>
				
						<view class="distance">
						<view class="left"> 
							<tui-icon color="#fff" name="gps" :size="24" unit="rpx" margin="0 8rpx 0 0"></tui-icon>
							<text>{{filterTxt(coach.poi ?  coach.poi.district+'-'+coach.poi.businessAreaName : '未知')}}</text> 
						</view>
					
						<view class="right">  
							<text>{{  coach.distance }}</text> 
						</view>
								
					</view>
					<view class="coach-info">
					<view style="display: flex;align-items: center; justify-content: space-between;">
						<view class="name-line"> 
							<view class="title">
								<text class="name">{{ filterText(coach.assistantName )}}</text>
							</view>
							<image class="verify-icon" src="/static/icons/verify.png"></image>
						</view> 
						
					<view style="flex: 1;">
							<view class="price-line">
								<text class="price">{{coach.rates}}</text>
								<text class="unit">元/小时</text>
							</view>
					</view>
					</view>
					<view class="time">
							<tui-icon name="clock" :size="30" unit="rpx" margin="0 8rpx 0 0"></tui-icon>
							<text>{{coach.begintime}}-{{coach.endtime}}</text>
						</view>
					</view>
					</view>			
				</view>			
          </template>
		<template v-slot:right="{ list }">
			<view class="coach-grid"> 
			<view class="coach-item" v-for="(coach, index) in list" :key="index" @click="goToDetail(coach)">
					 <image class="coach-img" :src="ossUrl+coach.masterImg" mode="aspectFill"></image>
					 <view class="online-tag" v-if="coach.online">一对一</view>
					
						  <view class="distance">
							<view class="left"> 
								<tui-icon color="#fff" name="gps" :size="24" unit="rpx" margin="0 8rpx 0 0"></tui-icon>
								<text>{{filterTxt(coach.poi ?  coach.poi.district+'-'+coach.poi.businessAreaName : '未知')}}</text> 
							</view>
					 
							<view class="right">  
								<text>{{  coach.distance }}</text> 
							</view>
								  
					 </view>
					 <view class="coach-info">
						<view style="display: flex;align-items: center; justify-content: space-between;">
							<view class="name-line"> 
							 <view class="title">
								 <text class="name">{{ filterText(coach.assistantName )}}</text>
							 </view>
							 <image class="verify-icon" src="/static/icons/verify.png"></image>
						 </view> 
						 
						<view style="flex: 1;text-align: right;">
								<view class="price-line">
									<text class="price">{{coach.rates}}</text>
									<text class="unit">元/小时</text>
								</view>
						</view>
						</view>
						<view class="time">
								<tui-icon name="clock" :size="30" unit="rpx" margin="0 8rpx 0 0"></tui-icon>
								<text>{{coach.begintime}}-{{coach.endtime}}</text>
							</view>
					 </view>
				 </view>	
				</view>
		</template>
	</tui-waterfall> 
		</z-paging> 
    <!--左抽屉弹层 筛选 -->
		<tui-drawer mode="right" :visible="drawer" @close="closeDrawer">
			 
			<view class="tui-drawer-box" :style="{ height: drawerH + 'px' }">
				<scroll-view class="tui-drawer-scroll" scroll-y :style="{ height: drawerH-tabbarHeight + 'px' }">
				 

					<view class="tui-drawer-title">
						<text class="tui-title-bold">性别</text>
						<view class="tui-all-box tui-icon-ml">
							<view class="tui-attr-right">全部</view>
							<tui-icon name="arrowdown" :size="14" color="#444"></tui-icon>
						</view>
					</view>
					<view class="tui-drawer-content tui-flex-attr">
						<view :class="classId==item.text ? 'tui-attr-item tui-btmItem-active':'tui-attr-item'"  @tap="clickTapClass(item)"  v-for="(item,index) in categoryList" :key="index">
							<view class="tui-attr-ellipsis">{{ item.text }}</view>
						</view> 
					</view> 

					<view class="tui-drawer-title">
						<text class="tui-title-bold">城市</text>
						<view class="tui-all-box tui-icon-ml">
							<view class="tui-attr-right">全部</view>
							<tui-icon name="arrowup" :size="14" color="#444"></tui-icon>
						</view>
					</view>
					<view class="tui-drawer-content tui-flex-attr"> 
						<view :class="cityId==item.id ? 'tui-attr-item tui-city-active':'tui-attr-item'" @tap="clickCity(item)" v-for="(item,index) in cityList" :key="index">
							<view class="tui-attr-ellipsis">{{item.name}}</view>
						</view>
					</view>
					<view class="tui-safearea-bottom"></view>
				</scroll-view>
				<view class="tui-attr-btnbox">
					<view class="tui-attr-safearea">
						<view class="tui-drawer-btn">
							<tui-button type="black" plain @click="czDrawer" height="60rpx" shape="circle" :size="26">重置</tui-button>
						</view>
						<view class="tui-drawer-btn">
							<tui-button type="danger" height="60rpx" shape="circle" :size="26" @click="closeDrawer">确定</tui-button>
						</view>
					</view>
				</view>
			</view>
		
		 </tui-drawer>
  </view>
</template>

<script>
import {getAssistantList,getCategoryList,getAreaList,getDistrictList,getSlideshow} from "@/http/api/index/index.js"
import Cache from '@/utils/cache' 
export default {
  data() {
    return {
    cityName: '',
    searchValue: '', 
    gender:'',
    drawer:false,
	classId:'',
	cityId:'',
    drawerH: 0,
	toView: 'id0',
	cityList:[],//城市列表
    selCategoryId:'',//选中的分类运动 
	activeIndex:0,
    categoryList: [{
        text: "男",
        value: "0"
      }, {
        text: "女",
        value: "1"
      }],
    tabbarHeight: uni.upx2px(100),
    ossUrl: getApp().globalData.ossurl,// 图片前缀
    dataList:[],
     //分类
     classList:[], 
    }
  },
  async onLoad(options){
	this.cityName=Cache.get('city') 
	 
	await this.getClassList()
	if(options){ 
		let data=JSON.parse(options.info)  
		 
		this.selCategoryId = data.id || this.classList[0]&& this.classList[0].id
	 
		let index=this.classList.filter(item => item.id === this.selCategoryId)||[]
		this.activeIndex=index[0]&&index[0].serialNumber -1  || 0 
		this.toView = `id${data.serialNumber-1}`; //动画滚动,滚动至中心位置
		 
		this.$refs.paging.reload()
	} 
 
	this.getCityList()
	uni.getSystemInfo({
			success: res => {
				let drawerH = res.windowHeight;
				// #ifdef H5
				this.drawerH = drawerH + 44;
				// #endif
				// #ifndef H5
				this.drawerH = drawerH;
				// #endif
			}
		});
  },
  methods: {
	filterText(text){
			if(!text) return ''
			return text.length <= 3 ? text : text.slice(0,3)+'...'
		},
		filterTxt(text){
			if(!text) return ''  
			return  text.slice(0,8)+'...'
		},
	//性别选择
	clickTapClass(item){
		this.classId=item.text
		this.gender=item.value
	},
	clickCity(item){
		this.cityName=item.name
		this.cityId=item.id
	},
	getCityList(){
		getAreaList({level:'city'}).then(res=>{
              if(res.code==200){
                this.cityList = res.data 
              }
         })
	},
    screen: function(e) { 
				let index = e.currentTarget.dataset.index;
      		  this.drawer = true;
	},
	czDrawer(){
		this.drawer = false;
		this.cityId=''
		this.classId=''
		this.activeIndex=0
		this.selCategoryId= this.classList[0]&& this.classList[0].id
		this.cityName=''
		this.gender=''
		this.$refs.paging.reload();
	},
    closeDrawer: function() {
		this.drawer = false;
		this.$refs.paging.reload();
	},
  async  getClassList(){
     await	 getCategoryList().then(res => {
				if (res.code == 200) {
					const list = res.data || [];

					console.log(list,'list')
					this.classList = list  
				} else {
					this.$utils.toast("首页-分类 " + res.msg);
				}
			}) 
    },
    clickClass(item,index){
      this.selCategoryId = item.id; 
	  this.activeIndex=index
      this.$refs.paging.reload();
    }, 
      // 搜索框相关事件
			handleSearch(e) { 
				this.searchValue = e.detail.value ;
				this.$refs.paging.reload();
			},
			clearInput() {
				this.searchValue = '';
				this.$refs.paging.reload();
			},
			input(e) {
				this.searchValue = e ;
				this.$refs.paging.reload();
			}, 
   	// 教练列表分页
		async getAssistantListData(pageNo, pageSize) {  
     			let that=this 
				const params = {
					pageNum: pageNo,
					pageSize: pageSize,
					categoryId: that.selCategoryId,
					assistantName: that.searchValue,
					latitude:Cache.get('latitude'), 
					longitude:Cache.get('longitude'),
       				gender:that.gender,
					cityName: that.cityName
				}
				getAssistantList(params).then(res => {
					if (res.code == 200) {
						that.$refs.paging.complete(res.rows);
					} else {
						that.$utils.toast(res.msg)
					}
				}).catch(res => {
					that.$refs.paging.complete(false);
				})
			},
    goToDetail(item) {
		if (!Cache.get('access_token')) {
					uni.showModal({
						title: '暂未登录',
						content: '请登录',
						confirmText: '前往登录',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/mine/modules/userLogin/userLogin'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					}) 
				}else{
			// 跳转到详情页
			uni.navigateTo({
					url: '/pages/index/modules/tutorDetails/tutorDetails?id=' + item.id
			})
		}
    }
  }
}
</script>

<style lang="scss" scoped>
  .coach-grid { 
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
  
		.coach-item {
		  position: relative; 
		  border-radius: 8px;
		  margin-top: 10px;
		  overflow: hidden;
		  border: 1px solid #eee; 
		  background: #fff;
  
		  .coach-img {
			width: 100%;
			height: 350rpx;
			object-fit: cover;
			position: relative;
		  }
		  .distance{
			position: absolute;
			bottom: 160rpx;
			display: flex;
			width: 100%;
			padding: 0 4rpx;
			justify-content: space-between;
			align-items: center;
			color: #fff;
			.left{ 
				width: 180rpx;
				display: flex;
				justify-content:center;
				align-items: center;
				font-size: 16rpx;
				height: 36rpx;
				background: rgba(0,0,0,0.3);
				border-radius: 52rpx 52rpx 52rpx 52rpx;
			}
			.right{
				width: 96rpx;
				font-size: 16rpx;
				display: flex;
				justify-content:center;
				align-items: center;
				height: 36rpx;
				background: rgba(0,0,0,0.3);
				border-radius: 52rpx 52rpx 52rpx 52rpx;
			}
		  }
  
		  .online-tag {
			position: absolute;
			top: 16rpx;
			left: 0rpx;
			background: #65e0c9;
			color: #fff;
			font-size: 12px;
			padding: 2px 6px;
			border-radius: 4px;
		  }
  
		  .coach-info {
			padding: 8px;
  
			.name-line {
			  display: flex;
			  align-items: center;
			  margin-bottom: 4px;
		 
				.title{
					display: flex;
					align-items: center;
				}
			  .name {
				font-size: 15px;
				font-weight: 500;
				display: inline-block;
				color: #333;
				width: 120rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-right: 4px;
			  }
			   
  
			  .verify-icon {
				width: 14px;
				height: 14px;
			  }
			}
  
			.service-id {
			  display: block;
			  font-size: 12px;
			  color: #999;
			  margin-bottom: 4px;
			}
  
			.work-time {
			  display: block;
			  font-size: 12px;
			  color: #666;
			  margin-bottom: 4px;
			}
  
			.price-line {
			  color: #FF5252;
			  flex: 1;
  
			  .price {
				font-size: 16px;
				font-weight: bold;
			  }
  
			  .unit {
				font-size: 12px;
				margin-left: 2px;
			  }
			}
		  }
		}
	  }
	  .tui-screen-item{
		font-size: 28rpx;
	  }
	/*筛选*/
	.tui-drawer-box {
		width: 686rpx;
		height: 100%;
		font-size: 24rpx;
		position: relative;
		overflow: hidden;
	}

	.tui-drawer-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		height: 80rpx;
	}

	.tui-title-bold {
		font-size: 26rpx;
		font-weight: bold;
		flex-shrink: 0;
	}

	.tui-location {
		margin-right: 6rpx;
	}

	.tui-attr-right {
		width: 70%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: right;
	}

	.tui-all-box {
		width: 90%;
		white-space: nowrap;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.tui-drawer-content {
		padding: 16rpx 30rpx 30rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.tui-input {
		border: 0;
		height: 64rpx;
		border-radius: 32rpx;
		width: 45%;
		background-color: #f7f7f7;
		text-align: center;
		font-size: 24rpx;
		color: #333;
	}

	.tui-phcolor {
		text-align: center;
		color: #b2b2b2;
		font-size: 24rpx;
	}

	.tui-flex-attr {
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.tui-attr-item {
		width: 30%;
		height: 64rpx;
		background-color: #f7f7f7;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 4rpx;
		box-sizing: border-box;
		border-radius: 32rpx;
		margin-right: 5%;
		margin-bottom: 5%;
	}

	.tui-attr-ellipsis {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		width: 96%;
		text-align: center;
	}

	.tui-attr-item:nth-of-type(3n) {
		margin-right: 0%;
	}

	.tui-attr-btnbox {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 100rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		background: #fff;
		z-index: 10;
	}

	.tui-attr-safearea {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}

	.tui-attr-btnbox::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-top: 1px solid #eaeef1;
		transform: scaleY(0.5) translateZ(0);
		transform-origin: 0 0;
	}

	.tui-drawer-btn {
		width: 48%;
		flex-shrink: 0;
	}

	.tui-mtop__30 {
		margin-top: 30rpx;
	}
.flexcontent{
     display: flex;
      justify-content: space-between;
      align-items: center;
}
	.calss-list { 
      white-space: nowrap;
      padding: 30rpx 10rpx;
      background-color: #fff; 
	  .coach-item {
		display: inline-block; 
		width: 156rpx;
		height: 156rpx; 
		margin-right: 10rpx; 
		text-align: center;
		background-color: #EEEEEE; 
		border-radius: 24rpx 24rpx 24rpx 24rpx;
			
		.image {
		  width: 80rpx;
		  height: 80rpx;
		  border-radius: 50%;
		  margin-bottom:4rpx;
		  margin-top: 20rpx;
		}
		
		.name {
		  display: block;
		  font-size: 24rpx;
		  color: #333;
		}
		
		.tag {
		  display: block;
		  font-size: 18rpx;
		  color: #999;
		}
	  }
    .activeItem{  
      position: relative; /* 添加这一行 */
      background-image: url('/static//home/bg_hover.png');
      background-position: 100%;
      background-repeat: no-repeat;
      background-size: cover;
    } 
	}
.tutor-list { 
  background-color: #f5f5f5;
  padding-bottom: 30rpx;

  .search-section {
    background: #fff;
    display: flex; 
      align-items: center;
    padding: 10rpx 10rpx 10rpx 30rpx;
    position: sticky;
    top: 0;
    z-index: 100;

    .search-box {
      display: flex;
      align-items: center; 
      border: 2rpx solid rgba(0, 0, 0, 0.1);
      border-radius: 36rpx;
      padding: 12rpx 24rpx;
      width: 65vw;

      input {
        flex: 1;
        margin-left: 16rpx;
        font-size: 28rpx;
      }
    }
  }

  .filter-section {
    display: flex;
    background: #fff;
    padding: 20rpx 30rpx;
    border-bottom: 1px solid #eee;
    justify-content: space-around;

    .filter-item {
      display: flex;
      align-items: center;
      margin-right: 40rpx;
      font-size: 28rpx;
      color: #333;

      .angle {
        width: 0;
        height: 0;
        border-left: 8rpx solid transparent;
        border-right: 8rpx solid transparent;
        border-top: 12rpx solid #666;
        margin-left: 8rpx;
      }
      .bottom{
        width: 0;
        height: 0;
        border-left: 8rpx solid transparent;
        border-right: 8rpx solid transparent;
        border-bottom: 12rpx solid #666;
        margin-left: 8rpx;
      }
    }
  }

}
.assistant-item {
      background: #fff;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      width: calc(50% - 10rpx);
      position: relative;

      .coach-level {
        position: absolute;
        left: 0;
        top: 0;
        background: #FF6B6B;
        color: #fff;
        font-size: 24rpx;
        padding: 4rpx 16rpx;
        border-radius: 4rpx;
        z-index: 1;
      }

      .image-placeholder {
        width: 100%;
        height: 400rpx;
        background: #f5f5f5;
        position: relative;
        
        image {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
     
      .coach-info { 
        .amount-item{
            display: flex;
            align-items: center;
            padding: 10rpx 0;
            justify-content: space-between;
        }
          
        .tutor-name {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 8rpx;
        }

        .price {
          margin-bottom: 8rpx;

          .amount {
            color: #FF6B6B;
            font-size: 32rpx;
            font-weight: bold;
          }

          .unit {
            color: #666;
            font-size: 24rpx;
            margin-left: 4rpx;
          }
        }

        .time {
          display: flex;
          align-items: center;
          color: #666;
          font-size: 24rpx;

          text {
            margin-left: 8rpx;
          }
        }
      }
}
.location-item {
          font-size: 28rpx;
          color: #333; 
          white-space: nowrap;
          display: flex;
          align-items: center;
          width: 100%;
          padding: 10rpx  0;
          justify-content: space-between;
          background-color:rgba(0, 0, 0, 0.4); 
          overflow: hidden;
          text-overflow: ellipsis;
          position: absolute;
          top: 350rpx;
          left: 0;
        .location{
            color: #fff;
            font-size: 24rpx;
            padding-left: 4rpx;
            }
            .distance {
          font-size: 24rpx;
          padding-right: 4rpx;
          color: #000; 
        }
    }
	.tui-btmItem-active{
		background-color: rgb(13, 184, 84);
		color: #fff;
	}
	.tui-city-active{
		background-color: rgb(13, 184, 84);
		color: #fff;
	}
	.time {
			font-size: 24rpx;
			display: flex;
			align-items: center;
			color: #bbbbbb;
			margin-top: 20rpx;

			.text {
				padding-left: 4rpx;
			}
		}
</style>
